<script setup lang="ts">
import { OrderStatus, OrderType } from '@/types/enum'
import indicatorBlue from '@/static/images/order_indicator_blue.png'
import indicatorGreen from '@/static/images/order_indicator_green.png'
import indicatorYellow from '@/static/images/order_indicator_yellow.png'
import { takeOrderAPI } from '@/apis/takeOrder'
import { useUserInfoStore } from '@/store/userInfo'

const props = defineProps<{
  orderId: string
  orderType: OrderType
  orderStatus: OrderStatus
  price: string
  time: string
  distance: string
  from: string
  to: string
  distanceFromStart?: string
}>()

const router = useRouter()
const userInfoStore = useUserInfoStore()

const orderIndicator = computed(() => {
  const indicators = {
    [OrderType.包车]: indicatorBlue,
    [OrderType.代叫]: indicatorGreen,
    [OrderType.捎件]: indicatorYellow,
  }
  return indicators[props.orderType]
})

const titleColor = computed(() => {
  const colors = {
    [OrderType.包车]: '#3F8BF6',
    [OrderType.代叫]: '#00A85C',
    [OrderType.捎件]: '#C9A662',
  }
  return colors[props.orderType]
})

const title = computed(() => {
  const titles = {
    [OrderType.包车]: '快车',
    [OrderType.代叫]: '代叫',
    [OrderType.捎件]: '捎件',
  }
  return titles[props.orderType]
})

/* ------------------------------- 滑动接单 START ------------------------------- */
const swiperState = ref<'normal' | 'loading' | 'success'>('normal')

async function handleDone() {
  swiperState.value = 'loading'
  const res = await takeOrderAPI({ orderid: props.orderId }, userInfoStore.userInfo!.token)
  if (res.data?.code === 1) {
    swiperState.value = 'success'
    router.push({
      name: 'orderDetail',
      params: { id: props.orderId },
    })
  }
  else {
    swiperState.value = 'normal'
    uni.showToast({ title: res.data?.msg, icon: 'none' })
  }
}
/* -------------------------------- 滑动接单 END -------------------------------- */
</script>

<template>
  <view class="mb-24rpx rounded-10rpx bg-white p-24rpx pt-18rpx">
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image
          class="h-20rpx w-30rpx"
          :src="orderIndicator"
        />
        <Spacer w="8" />
        <view class="text-40rpx font-medium leading-40rpx" :style="{ color: titleColor }">
          {{ title }}
        </view>
      </view>
      <view class="flex items-baseline text-#FA662F">
        <view class="text-32rpx">
          ¥
        </view>
        <view class="text-44rpx text-50rpx font-semibold">
          {{ price }}
        </view>
      </view>
    </view>
    <Spacer h="12" />
    <view class="rounded-10rpx bg-#F5F5F5 px-24rpx pb-40rpx pt-30rpx">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <image
            class="h-32rpx w-32rpx"
            src="@/static/images/clock_black_fill.png"
          />
          <Spacer w="24" />
          <view class="text-32rpx text-#333333 font-bold leading-32rpx">
            {{ props.time }}
          </view>
        </view>
        <view class="text-32rpx text-#3F8BF6 font-bold leading-32rpx">
          [全程{{ distance }}km]
        </view>
      </view>
      <Spacer h="32" />
      <view>
        <view class="flex items-center">
          <view class="flex-shrink-0 rounded-10rpx bg-#3F8BF6 p-6rpx text-24rpx text-white leading-24rpx">
            起
          </view>
          <Spacer w="24" class="flex-shrink-0" />
          <view class="relative flex-1">
            <view class="text-36rpx text-#333333 font-bold leading-50rpx">
              {{ from }}
            </view>
            <view v-if="distanceFromStart" class="absolute left-0 top-full mt-12rpx text-32rpx text-#3F8BF6 font-bold leading-32rpx">
              [距我{{ distanceFromStart }}km]
            </view>
          </view>
        </view>
        <view class="h-90rpx w-32rpx flex items-center justify-center">
          <view class="h-full w-0rpx border-r-1rpx border-r-gray-50 border-dashed" />
        </view>
        <view class="flex items-center">
          <view class="flex-shrink-0 rounded-10rpx bg-#FA662F p-6rpx text-24rpx text-white leading-24rpx">
            终
          </view>
          <Spacer w="24" class="flex-shrink-0" />
          <view class="flex-1 text-36rpx text-#333333 font-bold leading-50rpx">
            {{ to }}
          </view>
        </view>
      </view>
    </view>
    <Spacer h="12" />
    <Swiper
      v-if="props.orderStatus === OrderStatus.未接单"
      :state="swiperState"
      tip-text="向右滑动并确认抢单"
      @done="handleDone"
    />
    <view
      v-if="props.orderStatus === OrderStatus.已接单"
      class="flex items-center justify-between"
    >
      <RGButton width="248" type="secondary">
        取消订单
      </RGButton>
      <RGButton width="386">
        乘客已上车
      </RGButton>
    </view>
    <view
      v-if="props.orderStatus === OrderStatus.进行中"
      class="flex items-center justify-between"
    >
      <RGButton width="248" type="outline">
        联系平台
      </RGButton>
      <RGButton width="386">
        到达目的地
      </RGButton>
    </view>
    <view
      v-if="props.orderStatus === OrderStatus.已完成"
      class="flex items-center justify-between"
    >
      <RGButton width="654" type="outline">
        联系平台
      </RGButton>
    </view>
    <view
      v-if="props.orderStatus === OrderStatus.已取消"
      class="flex items-center justify-between"
    >
      <RGButton width="654" type="secondary">
        取消原因
      </RGButton>
    </view>
  </view>
</template>
